<template lang="html">
  <div>
    <form>
      <fieldset>
        <legend>标题设置:</legend>
        <div class="form-div">
          显示标题:<input type="checkbox" v-model="option.title.show"/>
        </div>
        <div class="form-div">
          标题内容:<input type="text" v-model="option.title.text"><br>
        </div>
        <div class="form-div">
          字体大小:<input type="text" v-model="option.title.textStyle.fontSize"><br>
        </div>
        <div class="form-div">
          字体粗细:
          <input type="radio" value="normal" v-model="option.title.textStyle.fontWeight">普通</input>
          <input type="radio" value="bold" v-model="option.title.textStyle.fontWeight">加粗</input>
        </div>
      </fieldset>
      <fieldset>
        <legend>图例设置:</legend>
        <div class="form-div">
          显示图例:<input type="checkbox" v-model="option.legend.show"/>
        </div>
        <div class="form-div">
          分布方式:
          <input type="radio"  value="horizontal" v-model="option.legend.orient">水平分布</input>
          <input type="radio"  value="vertical" v-model="option.legend.orient">垂直分布</input>
        </div>
        <div class="form-div">
          水平位置:
          <input type="radio"  value="left" v-model="option.legend.left">居左</input>
          <input type="radio"  value="center" v-model="option.legend.left">居中</input>
          <input type="radio"  value="right" v-model="option.legend.left">居右</input>
        </div>
        <div class="form-div">
          垂直位置:
          <input type="radio"  value="top" v-model="option.legend.top">居上</input>
          <input type="radio"  value="middle" v-model="option.legend.top">居中</input>
          <input type="radio"  value="bottom" v-model="option.legend.top">居下</input>
        </div>
      </fieldset>
    </form>
  </div>
  
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      option: {
        title: {
          show: true,
          text: '',
          textStyle:{
            fontSize: 12,
            fontWeight: 'normal'
          }
        },
        legend: {
          show: true,
          orient: 'horizontal',
          left: 'left',
          top: 'top'
        }
      }
    }
  },
  watch: {
    option:{
      deep: true,
      handler: function (val,oldVal){
        this.changeOption(val)
      }
    }
  },
  methods: {
    ...mapActions([
      'changeOption'
    ])
  }
}
</script>

<style scope>

  .form-div {
    height: 50px;
  }

</style>


